import React, {useEffect, useState} from 'react';
import {Card, Form, message, Modal, Select, Space} from "antd";
import {useDevices} from "@/pages/constant";

function useBindDevice({queryList}) {
    const [open, setOpen] = useState(false),
        [loading, setLoading] = useState(false),
        [form] = Form.useForm();
    const {deviceList} = useDevices({
        roomId: open.ID
    })

    function onCancel() {
        setOpen(false)
    }

    useEffect(() => {
        if (open === false) {
            form.resetFields();
        } else if (open.ID) {
            form.setFieldsValue({
                dy:open.dy || undefined,
                lb:open.lb || undefined,
                dm:open.dm || undefined,
                fjm:open.fjm || undefined,
            })
        }
    }, [open])

    function onOk() {
        form.validateFields().then(values => {
            ax.post("/api/roomBindDevice", {
                ...values,
                roomId: open.ID
            }).then(res => {
                message.success(res.msg);
                queryList();
                onCancel();
            })
        })
    }

    return {
        setDeviceOpen: setOpen,
        DeviceModal: <Modal
            title={"绑定设备"}
            open={open}
            onOk={onOk}
            onCancel={onCancel}
            confirmLoading={loading}
            width={800}
        >
            <Form
                labelCol={{span: 5}}
                wrapperCol={{span: 14}}
                form={form}
            >
                <Space direction={"vertical"} style={{width: "100%"}}>
                    <Card
                        title={"电源"}
                        size={"small"}
                    >
                        <Form.Item
                            label={"选择设备"}
                            name={"dy"}
                        >
                            <Select options={deviceList} placeholder={"请选择"} allowClear />
                        </Form.Item>
                    </Card>
                    <Card
                        title={"开房间门"}
                        size={"small"}
                    >
                        <Form.Item
                            label={"选择设备"}
                            name={"fjm"}
                        >
                            <Select options={deviceList} placeholder={"请选择"} allowClear />
                        </Form.Item>
                    </Card>
                    <Card
                        title={"开大门"}
                        size={"small"}
                    >
                        <Form.Item
                            label={"选择设备"}
                            name={"dm"}
                        >
                            <Select options={deviceList} placeholder={"请选择"} allowClear />
                        </Form.Item>
                    </Card>
                    <Card
                        title={"智能喇叭"}
                        size={"small"}
                    >
                        <Form.Item
                            label={"选择设备"}
                            name={"lb"}
                        >
                            <Select options={deviceList} placeholder={"请选择"} allowClear />
                        </Form.Item>
                    </Card>
                </Space>
            </Form>
        </Modal>
    }
}

export default useBindDevice;